import { Toolbar } from "@radix-ui/react-toolbar"
import { styled } from '@stitches/react';
import { useEffect, useRef } from "react";

const StyledToolbar = styled(Toolbar, {
    display: 'flex',
    padding: 10,
    width: '100%',
    minWidth: 'max-content',
    borderRadius: 6,
    backgroundColor: 'white',
})
const ToolbarContainer = ({ children }: React.PropsWithChildren) => {
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        if (!ref.current) return;
        const top = ref.current.offsetTop;
        const scroll = () => {
            if (!ref.current) return;
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            const style: any = scrollTop > top ? {
                position: "sticky",
                top: 0
            } : {
                position: "initial"
            }
            Object.keys(style).forEach((key) => {
                (ref.current as any).style[key] = style[key];
            })
        }
        window.addEventListener("scroll", scroll)
        return () => window.removeEventListener("scroll", scroll)
    }, []);
    return (
        <StyledToolbar ref={ref}>
            {children}
        </StyledToolbar>
    )
}

export const TollbarGroupContainer = () => {

}
export default ToolbarContainer